<template>
    <div>
        <el-input v-model="selectName" placeholder="请输入用户邮箱" style="width: 70%;"></el-input>
        <el-button type="primary" plain icon="el-icon-search" @click="getAllUsers"></el-button>

        <el-table :data="tableData" border style="width: 100%" height=70vh>
            <el-table-column prop="id" label="用户ID"></el-table-column>
            <el-table-column prop="email" label="邮箱">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.banTransfer ? 'danger' : 'success'">{{ scope.row.email }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column label="上传下载权限">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.banTransfer" @change="handleChange(scope.row)" inactive-color="#13ce66"
                        active-color="#ff4949"></el-switch>
                    <span v-if="!scope.row.banTransfer" :row-tag="'green'">已启用</span>
                    <span v-else :row-tag="'red'">已禁用</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @current-change="handlePageChange" :page-size="pageSize" :current-page.sync="currentPage"
            layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>
  
<script>
import MGTAPI from '../../api/management';

export default {
    data() {
        return {
            tableData: [], // 用户数据列表
            currentPage: 1, // 当前页码
            pageSize: 8, // 每页显示8条记录
            total: 0, // 数据总数
            selectName: ''
        };
    },

    methods: {
        getAllUsers() {
            let param = new URLSearchParams();
            param.append('currentPage', this.currentPage);
            param.append('pageSize', this.pageSize);
            param.append('selectName', this.selectName)
            MGTAPI.getUersListApi(param).then(res => {
                console.log(res)
                this.total = res.data.data.total
                this.tableData = res.data.data.records.map(record => ({
                    ...record,
                    banTransfer: record.banTransfer === 1 ? true : false,
                }));
            }).catch(error => {
                this.$message.error(error)
            });
        },
        handleChange(row) {
            const { id, banTransfer } = row;
            const action = banTransfer ? "disable" : "enable";
            MGTAPI.changeUserPer(id, action).then(res => {
                this.getAllUsers();
                this.$message.success("更新信息成功!");
            }).catch(error => {
                this.$message.error(error)
            });
        },
        handlePageChange() {
            this.getAllUsers();
        }
    },

    mounted() {
        this.getAllUsers();
    },
};
</script>
  
<style scoped>
/* 定义红色标签 */
.el-tag--red {
    background: #ff4949;
    color: #fff;
}

/* 定义绿色标签 */
.el-tag--green {
    background: #13ce66;
    color: #fff;
}

.el-table {
    height: 80%;
    /* 设置表格高度为父容器的 80% */
    overflow-y: auto;
    /* 设置纵向滚动条 */
}
</style>
  
  